<template>
    <div class="scheduleManagement">
        <div class="homeMain-title">
            日程管理
        </div>

        <div class="mt-10">
            <Calendar
                v-if="typeIsNotDay"
                class="ui-calendar"
                :start-day="currMonth"
                :dateData="dateData"
                :on-month-change="onMonthChange"
                :on-prev="onPrev"
                :on-next="onNext"
                locale="zh-cn"
                :mode="mode"
                :render-header="renderHeader"
                ref="calendar">
                <div slot="header-left" class="ui-calendar-header__left">
                    <Button class="homeMain-title-btn" icon="ios-add-circle-outline" @click="openAddScheduleMod('add')">新增日程</Button>
                </div>
                <div :class="[ 'ui-calendar-item', { 'is-otherMonth': item.isPrevMonth || item.isNextMonth, 'is-today': item.isToday }, ]" slot-scope="item">
                    <div :class="['ui-calendar-item-date']">
                        {{item.date.date}}
                    </div>
                    <div class="ui-calendar-item-name" v-for="(item, index) in item.data" :key="index" @click="openAddScheduleMod('edit', item)">
                        <Tooltip placement="bottom" theme="light" max-width="350">
                            <div slot="content" class="tooltip-box">
                                <div class="box1">
                                    <span :class="'sty' + item.priorityType">{{item.priorityType}}</span>
                                    <div class="text">{{item.title}}</div>
                                    </div>
                                <div class="box2">
                                    <Icon type="md-time" size="24" color="#000" class="ml-10 mr-10" />{{item.date}}  {{item.frameType === 1 ? '全天' : item.startTimeFrame + ' - ' + item.endTimeFrame}}</div>
                                <div class="box3" v-if="item.remark">
                                    <Icon type="ios-list-box" size="24" color="#000" class="ml-10 mr-10" />{{item.remark}}</div>
                            </div>
                            <span class="ui-calendar-item-name-span" :class="'sty' + item.priorityType">{{item.priorityType}}</span>
                            <div class="ui-calendar-item-name-text" :class="{'line-through': item.isCompleted}">{{item.title}}</div>
                            <Icon type="md-close" size="18" color="#fff" class="ui-calendar-item-name-del" @click.stop="deleteItem(item.id)" />
                        </Tooltip>
                    </div>
                </div>
                <div slot="header-right" class="ui-calendar-header__right">
                   <div
                        :class="['ui-calendar-header__right-btn' ,{ active: mode === 'month' }]"
                        @click="mode = 'month'">
                        按月
                    </div>
                    <div
                        :class="['ui-calendar-header__right-btn', { active: mode === 'week' }]"
                        @click="mode = 'week'">
                        按周
                    </div>
                    <div
                        :class="['ui-calendar-header__right-btn']"
                        @click="ChickDay()">
                        按日
                    </div>
                </div>
            </Calendar>
            <div class="ui-calendar is-day" v-else>
                <div class="vue-calendar-header jc-sb">
                    <div class="vue-calendar-header-left">
                        <Button class="homeMain-title-btn" icon="ios-add-circle-outline"  @click="openAddScheduleMod('add')">新增日程</Button>
                        <Select style="width:150px" class="ml-10" v-model="viewType" @on-change="findUserCalendarList(searchQuery)">
                            <Option value="1">象限视图</Option>
                            <Option value="2">时间视图</Option>
                        </Select>
                    </div>
                    <div class="vue-calendar-header-center d-f" style="justify-content: center;">
                        <div class="ui-calendar-modeBtn" @click="getToday('today')">今天</div>
                        <div class="ui-calendar-modeBtn" @click="getTodayToPrev">
                            <Icon type="ios-arrow-back" />
                        </div>
                        <div class="ui-calendar-modeBtn">{{searchQuery.searchDay}}</div>
                        <div class="ui-calendar-modeBtn" @click="getTodayToNext">
                            <Icon type="ios-arrow-forward" />
                        </div>
                    </div>
                    <div class="vue-calendar-header-right">
                        <div class="ui-calendar-header__right">
                            <div class="ui-calendar-header__right-btn" @click="chickMonth">
                                按月
                            </div> <div class="ui-calendar-header__right-btn" @click="chickWeek">
                                按周
                            </div> <div class="ui-calendar-header__right-btn active">
                                按日
                            </div>
                        </div>
                    </div>
                </div>

                <Row :gutter="20" v-if="viewType === '1'">

                    <Col span="12" class="mb-20">
                        
                        <div class="backgroundBlackOp06 is-day-title">
                            <span class="type1">1</span>
                            重要且紧急
                        </div>
                        <div class="backgroundBlackOp03 is-day-con">
                            <div class="is-day-con-item" v-for="(item, index) in toDayDateData" :key="index" v-if="item.priorityType === '1'">
                                <Checkbox v-model="item.isCompleted" @on-change="changeCheckBox(item.id, item.isCompleted)">
                                    <span class="is-day-con-sty1">{{ item.isCompleted ? '完成' : '未完成'}}</span>
                                </Checkbox>
                                <span class="is-day-con-sty2" :class="['type' + item.priorityType, {'line-through': item.isCompleted}]" @click.stop="openAddScheduleMod('edit', item)">{{item.frameType === 1 ? '全天' : item.startTimeFrame + ' - ' + item.endTimeFrame}}{{item.title}}</span>
                                <Icon type="md-close" size="18" color="#fff" class="ui-calendar-item-name-del" @click.stop="deleteItem(item.id)" />
                            </div>
                        </div>

                    </Col>

                    <Col span="12" class="mb-20">

                        <div class="backgroundBlackOp06 is-day-title">
                            <span class="type2">2</span>
                            重要不紧急
                        </div>
                        <div class="backgroundBlackOp03 is-day-con">
                            <div class="is-day-con-item" v-for="(item, index) in toDayDateData" :key="index" v-if="item.priorityType === '2'">
                                <Checkbox v-model="item.isCompleted" @on-change="changeCheckBox(item.id, item.isCompleted)">
                                    <span class="is-day-con-sty1">{{ item.isCompleted ? '完成' : '未完成'}}</span>
                                </Checkbox>
                                <span class="is-day-con-sty2" :class="['type' + item.priorityType, {'line-through': item.isCompleted}]" @click.stop="openAddScheduleMod('edit', item)">{{item.frameType === 1 ? '全天' : item.startTimeFrame + ' - ' + item.endTimeFrame}}{{item.title}}</span>
                                <Icon type="md-close" size="18" color="#fff" class="ui-calendar-item-name-del" @click.stop="deleteItem(item.id)" />
                            </div>
                        </div>

                    </Col>

                    <div class="clearfix"></div>

                    <Col span="12" class="mb-20">

                        <div class="backgroundBlackOp06 is-day-title">
                            <span class="type3">3</span>
                            紧急不重要
                        </div>
                        <div class="backgroundBlackOp03 is-day-con">
                            <div class="is-day-con-item" v-for="(item, index) in toDayDateData" :key="index" v-if="item.priorityType === '3'">
                                <Checkbox v-model="item.isCompleted" @on-change="changeCheckBox(item.id, item.isCompleted)">
                                    <span class="is-day-con-sty1">{{ item.isCompleted ? '完成' : '未完成'}}</span>
                                </Checkbox>
                                <span class="is-day-con-sty2" :class="['type' + item.priorityType, {'line-through': item.isCompleted}]" @click.stop="openAddScheduleMod('edit', item)">{{item.frameType === 1 ? '全天' : item.startTimeFrame + ' - ' + item.endTimeFrame}}{{item.title}}</span>
                                <Icon type="md-close" size="18" color="#fff" class="ui-calendar-item-name-del" @click.stop="deleteItem(item.id)" />
                            </div>
                        </div>

                    </Col>

                    <Col span="12" class="mb-20">

                        <div class="backgroundBlackOp06 is-day-title">
                            <span class="type4">4</span>
                            不重要不紧急
                        </div>
                        <div class="backgroundBlackOp03 is-day-con">
                            <div class="is-day-con-item" v-for="(item, index) in toDayDateData" :key="index" v-if="item.priorityType === '4'">
                                <Checkbox v-model="item.isCompleted" @on-change="changeCheckBox(item.id, item.isCompleted)">
                                    <span class="is-day-con-sty1">{{ item.isCompleted ? '完成' : '未完成'}}</span>
                                </Checkbox>
                                <span class="is-day-con-sty2" :class="['type' + item.priorityType, {'line-through': item.isCompleted}]" @click.stop="openAddScheduleMod('edit', item)">{{item.frameType === 1 ? '全天' : item.startTimeFrame + ' - ' + item.endTimeFrame}}{{item.title}}</span>
                                <Icon type="md-close" size="18" color="#fff" class="ui-calendar-item-name-del" @click.stop="deleteItem(item.id)" />
                            </div>
                        </div>

                    </Col>
                </Row>

                <div class="viewTypeIsTime" v-if="viewType === '2'">
                    <div class="viewTypeIsTime-top d-f" :style="toDayTimeLineTimeData.length > 0 ? '' : 'min-height:820px'">
                        <div class="backgroundBlackOp06 viewTypeIsTime-top-left">今天</div>
                        <div class="backgroundBlackOp03 pl-20 viewTypeIsTime-top-right">
                            <div class="is-day-con-item" v-for="(item, index) in toDayTimeLineAllDayData" :key="index">
                                <Checkbox v-model="item.isCompleted" @on-change="changeCheckBox(item.id, item.isCompleted)">
                                    <span class="is-day-con-sty1">{{ item.isCompleted ? '完成' : '未完成'}}</span>
                                </Checkbox>
                                <span class="is-day-con-sty2" :class="['type' + item.priorityType, {'line-through': item.isCompleted}]" @click.stop="openAddScheduleMod('edit', item)">{{item.frameType === 1 ? '全天' : item.startTimeFrame + ' - ' + item.endTimeFrame}}{{item.title}}</span>
                                <Icon type="md-close" size="18" color="#fff" class="ui-calendar-item-name-del" @click.stop="deleteItem(item.id, 'top')" />
                            </div>
                        </div>
                    </div>

                    <Timeline class="viewTypeIsTime-line mt-15" :style="toDayTimeLineTimeData.length > 0 ? 'min-height:779px' : ''">
                        <TimelineItem v-for="(item, index) in toDayTimeLineTimeData" :key="index">
                            <div class="time">{{item.startTimeFrame}}</div>
                            <div class="content">
                                <div class="content-item" v-for="(item2, index2) in item.listInfo" :key="index2">
                                    <Checkbox v-model="item2.isCompleted" @on-change="changeCheckBox(item2.id, item2.isCompleted)">
                                        <span class="viewTypeIsTime-line-sty1">{{ item2.isCompleted ? '完成' : '未完成'}}</span>
                                        <span class="viewTypeIsTime-line-sty2" :class="'type' + item2.priorityType">{{item2.priorityType}}</span>
                                        
                                    </Checkbox>
                                    <span class="viewTypeIsTime-line-sty3" @click.stop="openAddScheduleMod('edit', item2)">
                                        <div class="viewTypeIsTime-line-sty3-text1" :class="{'line-through': item2.isCompleted}">{{item2.title}}</div>
                                        <div class="viewTypeIsTime-line-sty3-text2" :class="{'line-through': item2.isCompleted}">{{item2.frameType === 1 ? '全天' : item2.startTimeFrame + ' - ' + item2.endTimeFrame}}{{item2.title}}</div>
                                        <div class="viewTypeIsTime-line-sty3-text3" :class="{'line-through': item2.isCompleted}">{{item2.remark}}</div>
                                    </span>
                                    <Icon type="md-close" size="18" color="#fff" class="ui-calendar-item-name-del" @click.stop="deleteItem(item2.id, 'bot')" />
                                </div>
                            </div>
                        </TimelineItem>
                    </Timeline>
                </div>

            </div>
        </div>

        <Modal 
            v-model="addScheduleMod.isShow" 
            width="800" 
            class="publicModClass">
            <p slot="header">{{addScheduleMod.title}}</p>
            <Form ref='addUserCalendarRef' :model="userCalendar" :rules="userCalendarValidate" :label-width="150" class="publicModClass-form">
                <!-- 标题 -->
                <FormItem label="标题：" prop="title">
                    <Input v-model="userCalendar.title" placeholder="请输入标题"/>
                </FormItem>
                <!-- 是否完成 -->
                <FormItem  label="是否完成：">
                    <RadioGroup v-model="userCalendar.isCompleted" style="color:#fff;">
                        <Radio :label="1">是</Radio>
                        <Radio :label="0">否</Radio>
                    </RadioGroup>
                </FormItem>
                <!-- 优先级 -->
                <FormItem label="优先级：">
                    <Select v-model="userCalendar.priorityCode" @on-change="getPriorityQuery">
                        <Option v-for="(item, index) in priorityList" :value="item.code" :key="index">{{ item.description }}</Option>
                    </Select>
                </FormItem>
                <Row>
                    <Col span="12">
                        <!-- 日期 -->
                        <FormItem  label="日期：">
                            <DatePicker v-model="userCalendar.calendarTime" transfer format="yyyy-MM-dd" type="date" placeholder="请选择日期"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <!-- 时间 -->
                        <FormItem  label="时间：" class="chooseTimeBox">
                            <Input suffix="ios-arrow-down" v-model="userCalendar.frameText" placeholder="请选择时间" @on-focus="openTimeBox" />
                            <div class="TimeBox" v-if="TimeBoxType">
                                <div class="top">
                                    <TimePicker v-model="userCalendar.startTimeFrame" format="HH:mm" transfer placeholder="开始时间" @on-change="changeStartTimeFrame"></TimePicker>
                                    <div class="line">-</div>
                                    <TimePicker v-model="userCalendar.endTimeFrame" format="HH:mm" transfer placeholder="结束时间" @on-change="changeEndTimeFrame"></TimePicker>
                                </div>
                                <div class="bot" @click="getAndCloseTimeBox">
                                    清除时间
                                </div>
                            </div>
                        </FormItem>
                    </Col>
                </Row>
                
                <!-- 详细描述 -->
                <FormItem  label="详细描述：" prop="remark">
                    <Input v-model="userCalendar.remark" placeholder="请输入详细描述" type="textarea" :autosize="{minRows: 2,maxRows: 5}"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button :loading="addScheduleMod.btnLoading" @click="userCalendarOk('addUserCalendarRef')">提交</Button>
                <Button :loading="addScheduleMod.btnLoading" @click="userCalendarCancel('addUserCalendarRef')">取消</Button>
                <span v-if="addScheduleMod.title === '编辑日程'">
                    <Icon type="ios-trash-outline" size="24" color="#fff" @click="deleteItem(userCalendarCurrentId)" />
                </span>
            </div>
        </Modal>


        <Spin size="large" fix v-show="showSpin">
            {{spinMsg}}
        </Spin>
    </div>
</template>

<script>
    import moment from 'moment';
    export default {
        name: 'scheduleManagement',
        data () {
            return {
                showSpin: false,
                spinMsg: '加载中，请稍后...',
                typeIsNotDay: true,
                currMonth: '',
                dateData: [],
                mode: 'month',
                searchQuery: {
                    searchDay: '',
                    searchMonth: '',
                    searchWeekEnd: '',
                    searchWeekStart: ''
                },
                addScheduleMod: {
                    isShow: false,
                    title: '新增日程',
                    btnLoading: false
                },
                TimeBoxType: false,
                viewType: '1',
                year: '',
                month: '',
                day: '',
                userCalendar: {
                    title: '',
                    isCompleted: 0,
                    priorityCode: 'UCP00001',
                    priorityName: '重要紧急',
                    calendarTime: '',
                    frameText: '全天',
                    frameType: 1,
                    startTimeFrame: '',
                    endTimeFrame: '',
                    remark: ''
                },
                userCalendarCurrentId: null,
                userCalendarValidate: {
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { type: 'string', max: 50, message: '最多50个字', trigger: 'blur' },
                        { validator: this.validateTitle, trigger: 'blur' }
                    ],
                    remark: [
                        { type: 'string', max: 1500, message: '最多1500个字', trigger: 'blur' }
                    ]
                },
                priorityList: [],
                toDayDateData: [],
                toDayTimeLineAllDayData: [],
                toDayTimeLineTimeData: []
            };
        },
        mounted () {
            this.init();
        },
        watch: {
        },
        methods: {
            // 初始化方法
            init () {
                if (localStorage.getItem('dictionary')) {
                    this.priorityList = JSON.parse(localStorage.getItem('dictionary')).USER_CALENDAR_PRIORITY;
                }
                // console.log(this.priorityList, 666);
                const date = new Date();
                this.year = date.getFullYear();
                this.month = date.getMonth() + 1;
                this.day = date.getDate();
    
                this.searchQuery.searchMonth = this.year + '-' + this.month + '-' + this.day;
                this.findUserCalendarList(this.searchQuery);
            },
            // 根据不同条件查询数据
            findUserCalendarList (query) {
                this.showSpin = true;
                let paramsObj = {};
                query.searchDay ? paramsObj.searchDay = query.searchDay : paramsObj.searchDay = '';
                query.searchMonth ? paramsObj.searchMonth = query.searchMonth : paramsObj.searchMonth = '';
                query.searchWeekEnd ? paramsObj.searchWeekEnd = query.searchWeekEnd : paramsObj.searchWeekEnd = '';
                query.searchWeekStart ? paramsObj.searchWeekStart = query.searchWeekStart : paramsObj.searchWeekStart = '';
                // console.log(paramsObj, 1312321);
                depot.get({
                    url: this.URL.USER.FIND_USER_CALENDAR_LIST,
                    config: {
                        params: paramsObj
                    },
                    cb: data => {
                        this.showSpin = false;
                        if (data.code === 0) {
                            data.data.forEach((item, index) => {
                                // 加date字段用于组件回显
                                item.date = item.year + '-' + (item.month < 10 ? '0' + item.month : item.month) + '-' + (item.day < 10 ? '0' + item.day : item.day);
                                // 用于时间转换拼写
                                item.date2 = item.year + '-' + (item.month < 10 ? '0' + item.month : item.month) + '-' + (item.day < 10 ? '0' + item.day : item.day) + ' ' + item.startTimeFrame + ':00';
                                // 加frameText字段用于弹框Input回显
                                item.frameType === 1 ? item.frameText = '全天' : item.frameText = '';
                                // 根据等级加priorityType字段用于后面排序
                                if (item.priorityCode === 'UCP00001') {
                                    item.priorityType = '1';
                                } else if (item.priorityCode === 'UCP00002') {
                                    item.priorityType = '2';
                                } else if (item.priorityCode === 'UCP00003') {
                                    item.priorityType = '3';
                                } else if (item.priorityCode === 'UCP00004') {
                                    item.priorityType = '4';
                                }
                            });
                            // 根据等级priorityType字段排序
                            data.data.sort(function (a, b) {
                                if (a.priorityType !== b.priorityType) {
                                    return a.priorityType - b.priorityType;
                                }
                            });

                            let arr = []; // 非全天数组
                            let arr3 = []; // 全天数组
                            let arr4 = []; // 临时合并数组
                            // 排序后的区分全天和非全天数组用于最后合并
                            data.data.forEach((item, index) => {
                                if (item.frameType === 1) {
                                    arr3.push(item);
                                } else {
                                    arr.push(item);
                                }
                            });
                            this.toDayTimeLineAllDayData = JSON.parse(JSON.stringify(arr3));

                            // 先按照等级分类后每个等级内时间转换后排序再合并
                            let arr2 = JSON.parse(JSON.stringify(arr));
                            let a = [];
                            let b = [];
                            let c = [];
                            let d = [];
                            arr2.forEach((item, index) => {
                                if (item.priorityType === '1') {
                                    a.push(item);
                                } else if (item.priorityType === '2') {
                                    b.push(item);
                                } else if (item.priorityType === '3') {
                                    c.push(item);
                                } else if (item.priorityType === '4') {
                                    d.push(item);
                                }
                            });
                            a.sort(function (a, b) {
                                return Date.parse(a.date2.replace(/-/g, '/')) - Date.parse(b.date2.replace(/-/g, '/'));
                            });
                            b.sort(function (a, b) {
                                return Date.parse(a.date2.replace(/-/g, '/')) - Date.parse(b.date2.replace(/-/g, '/'));
                            });
                            c.sort(function (a, b) {
                                return Date.parse(a.date2.replace(/-/g, '/')) - Date.parse(b.date2.replace(/-/g, '/'));
                            });
                            d.sort(function (a, b) {
                                return Date.parse(a.date2.replace(/-/g, '/')) - Date.parse(b.date2.replace(/-/g, '/'));
                            });
    
                            arr2 = [...a, ...b, ...c, ...d];
                            // console.log(arr2, 'arr2');
                            // 合并赋值
                            arr4 = [...arr3, ...arr2];
    
                            this.dateData = JSON.parse(JSON.stringify(arr4));
                            this.toDayDateData = JSON.parse(JSON.stringify(arr4));
                            console.log(this.dateData, 998877);
                            // 非全天数组根据startTimeFrame起始时间对比排序用于time显示新增listInfo字段用于回显
                            let arr8 = JSON.parse(JSON.stringify(arr2));
                            let listArr9 = [];
                            arr8.forEach(function (el, index) {
                                for (var i = 0; i < listArr9.length; i++) {
                                // 对比相同的字段key，相同放入对应的数组
                                    if (listArr9[i].startTimeFrame == el.startTimeFrame) {
                                        listArr9[i].listInfo.push({
                                            id: el.id,
                                            title: el.title,
                                            remark: el.remark,
                                            isCompleted: el.isCompleted,
                                            priorityCode: el.priorityCode,
                                            priorityName: el.priorityName,
                                            priorityType: el.priorityType,
                                            calendarTime: el.calendarTime,
                                            frameText: el.frameText,
                                            frameType: el.frameType,
                                            startTimeFrame: el.startTimeFrame,
                                            endTimeFrame: el.endTimeFrame,
                                            date: el.date
                                        });
                                        return;
                                    }
                                }
                                // 第一次对比没有参照，放入参照
                                listArr9.push({
                                    startTimeFrame: el.startTimeFrame,
                                    date2: el.date2,
                                    listInfo: [{
                                        id: el.id,
                                        title: el.title,
                                        remark: el.remark,
                                        isCompleted: el.isCompleted,
                                        priorityCode: el.priorityCode,
                                        priorityName: el.priorityName,
                                        priorityType: el.priorityType,
                                        calendarTime: el.calendarTime,
                                        frameText: el.frameText,
                                        frameType: el.frameType,
                                        startTimeFrame: el.startTimeFrame,
                                        endTimeFrame: el.endTimeFrame,
                                        date: el.date
                                    }]
                                });
                            });

                            listArr9.sort(function (a, b) {
                                return Date.parse(a.date2.replace(/-/g, '/')) - Date.parse(b.date2.replace(/-/g, '/'));
                            });

                            this.toDayTimeLineTimeData = JSON.parse(JSON.stringify(listArr9));
                            console.log(this.toDayTimeLineTimeData, 332211);
                        } else {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: error => {
                        this.showSpin = false;
                        this.$Message.error('查找信息失败');
                    }
                });
            },
            // 更改周份触发
            onMonthChange (val) {
                // console.log(val, '更改月份触发');
            },
            // 更改月份触发往上
            onPrev (val) {
                this.searchQuery = {};
                if (this.mode === 'month') {
                    // console.log(val, '往上月');
                    this.searchQuery.searchMonth = val.startDay.year + '-' + (val.startDay.month < 10 ? '0' + val.startDay.month : val.startDay.month);
                }
                if (this.mode === 'week') {
                    // console.log(val, '往上周');
                    this.searchQuery.searchWeekStart = moment(val.startDay.full).subtract(7, 'days').format('YYYY-MM-DD');
                    this.searchQuery.searchWeekEnd = moment(val.endDay.full).subtract(7, 'days').format('YYYY-MM-DD');
                }
                this.findUserCalendarList(this.searchQuery);
            },
            // 更改月份触发往下
            onNext (val) {
                this.searchQuery = {};
                if (this.mode === 'month') {
                    // console.log(val, '往下月');
                    this.searchQuery.searchMonth = val.endDay.year + '-' + (val.endDay.month < 10 ? '0' + val.endDay.month : val.endDay.month);
                }
                if (this.mode === 'week') {
                    // console.log(val, '往下周');
                    this.searchQuery.searchWeekStart = moment(val.startDay.full).add(7, 'days').format('YYYY-MM-DD');
                    this.searchQuery.searchWeekEnd = moment(val.endDay.full).add(7, 'days').format('YYYY-MM-DD');
                }
                this.findUserCalendarList(this.searchQuery);
            },
            // 点击今天
            getToday (type) {
                this.searchQuery = {};
                if (this.mode === 'month') {
                    if (type === 'today') {
                        // console.log('选择今日-日');
                        this.searchQuery.searchDay = moment().format('YYYY-MM-DD');
                        // console.log(this.searchQuery.searchDay, 456);
                    } else {
                        // console.log('选择今日-月');
                        this.searchQuery.searchMonth = moment().format('YYYY-MM');
                        // console.log(this.searchQuery.searchMonth, 456)
                        this.$refs.calendar.changeDate(this.searchQuery.searchMonth);
                    }
                }
                if (this.mode === 'week') {
                    if (type === 'today') {
                        // console.log('选择今日-日');
                        this.searchQuery.searchDay = moment().format('YYYY-MM-DD');
                        // console.log(this.searchQuery.searchDay, 456);
                    } else {
                        // console.log('选择今日-周');
                        this.searchQuery.searchWeekStart = moment().startOf('week').format('YYYY-MM-DD');
                        this.searchQuery.searchWeekEnd = moment().endOf('week').format('YYYY-MM-DD');
                        // console.log(this.searchQuery.searchWeekStart, 321);
                        this.$refs.calendar.changeDate(this.searchQuery.searchWeekStart);
                    }
                }
                this.findUserCalendarList(this.searchQuery);
            },
            // 按日选择下一天
            getTodayToNext () {
                if (this.searchQuery.searchDay) {
                    this.searchQuery.searchDay = moment(this.searchQuery.searchDay).add(1, 'days').format('YYYY-MM-DD');
                }
                this.findUserCalendarList(this.searchQuery);
            },
            // 按日选择上一天
            getTodayToPrev () {
                if (this.searchQuery.searchDay) {
                    this.searchQuery.searchDay = moment(this.searchQuery.searchDay).subtract(1, 'days').format('YYYY-MM-DD');
                }
                this.findUserCalendarList(this.searchQuery);
            },
            // 删除当前条目
            deleteItem (id, flag) {
                this.$Modal.confirm({
                    title: '删除日程',
                    content: '是否删除日程？',
                    loading: true,
                    onOk: () => {
                        depot.post({
                            url: this.URL.USER.DELETE_USER_CALENDAR + '?id=' + id,
                            cb: (data) => {
                                if (data.code === 0) {
                                    this.$Message.success('删除成功');
                                    this.$Modal.remove();
    
                                    if (this.addScheduleMod.isShow && this.addScheduleMod.title === '编辑日程') {
                                        this.addScheduleMod.isShow = false;
                                    }

                                    if (this.mode === 'month' || this.mode === 'week') {
                                        if (this.viewType === '1') {
                                            this.dateData = this.dateData.filter(item => {
                                                return item.id !== id;
                                            });
                                            this.toDayDateData = this.toDayDateData.filter(item => {
                                                return item.id !== id;
                                            });
                                        } else if (this.viewType === '2') {
                                            if (flag === 'top') {
                                                this.toDayTimeLineAllDayData = this.toDayTimeLineAllDayData.filter(item => {
                                                    return item.id !== id;
                                                });
                                            } else if (flag === 'bot') {
                                                this.toDayTimeLineTimeData.forEach((item, index) => {
                                                    if (item.listInfo.length > 0) {
                                                        item.listInfo.forEach((item2, index2) => {
                                                            if (item2.id === id) {
                                                                item.listInfo.splice(index2, 1);
                                                            }
                                                        });
                                                    }
                                                });
                                                let currentIndex = null;
                                                this.toDayTimeLineTimeData.forEach((item, index) => {
                                                    if (!item.listInfo || item.listInfo.length === 0) {
                                                        currentIndex = index;
                                                    }
                                                });
                                                if (currentIndex !== null) {
                                                    this.toDayTimeLineTimeData.splice(currentIndex, 1);
                                                }
                                            }
                                        } else {
                                            this.dateData = this.dateData.filter(item => {
                                                return item.id !== id;
                                            });
                                        }
                                    }
                                } else if (data.code === 999) {
                                    this.$Modal.remove();
                                    this.$Message.error(data.message);
                                }
                            },
                            ce: (error) => {
                                this.$Modal.remove();
                            }
                        });
                    },
                    onCancel: () => {
                        this.$Message.info('取消删除');
                    }
                });
            },
            // 单击改变当前条目完成状态
            changeCheckBox (id, type) {
                this.showSpin = true;
                depot.post({
                    url: this.URL.USER.UPDATE_USER_CALENDAR_COMPLETED + '?id=' + id + '&isComplated=' + type,
                    cb: (data) => {
                        this.showSpin = false;
                        if (data.code === 0) {
    
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.showSpin = false;
                    }
                });
            },
            // 头部选择方法
            renderHeader ({ prev, next, selectedDate }) {
                const h = this.$createElement;

                const prevButton = h('div', {
                    class: ['ui-calendar-modeBtn'],
                    on: {
                        click: prev
                    }
                }, ['<']);

                const nextButton = h('div', {
                    class: ['ui-calendar-modeBtn'],
                    on: {
                        click: next
                    }
                }, ['>']);

                const dateText = h('div', { class: ['ui-calendar-modeBtn'] }, [selectedDate]);

                const nowDate = h('div', {
                    class: ['ui-calendar-modeBtn'],
                    on: {
                        click: () => {
                            this.getToday();
                        }
                    }
                }, ['今天']);
                return h('div', [nowDate, prevButton, dateText, nextButton]);
            },
            chickMonth () {
                this.searchQuery.searchWeekStart = '';
                this.searchQuery.searchWeekEnd = '';
                this.searchQuery.searchDay = '';
                this.typeIsNotDay = true;
                this.mode = 'month';
                this.searchQuery.searchMonth = moment().format('YYYY-MM');
                this.findUserCalendarList(this.searchQuery);
            },
            chickWeek () {
                this.searchQuery.searchMonth = '';
                this.searchQuery.searchDay = '';
                this.typeIsNotDay = true;
                this.mode = 'week';
                this.searchQuery.searchWeekStart = moment().startOf('week').format('YYYY-MM-DD');
                this.searchQuery.searchWeekEnd = moment().endOf('week').format('YYYY-MM-DD');
                this.findUserCalendarList(this.searchQuery);
            },
            ChickDay () {
                // console.log('点击了日');
                this.searchQuery.searchMonth = '';
                this.searchQuery.searchWeekStart = '';
                this.searchQuery.searchWeekEnd = '';
                this.typeIsNotDay = false;
                this.searchQuery.searchDay = moment().format('YYYY-MM-DD');
                this.findUserCalendarList(this.searchQuery);
            },
            // 弹框内时间获取焦点触发
            openTimeBox () {
                this.TimeBoxType = true;
            },
            // 弹框内清除时间按钮
            getAndCloseTimeBox () {
                this.TimeBoxType = false;
                this.userCalendar.frameText = '全天';
                this.userCalendar.startTimeFrame = '';
                this.userCalendar.endTimeFrame = '';
                this.userCalendar.frameType = 1;
            },
            // 弹框内优先级遍历赋值
            getPriorityQuery (val) {
                this.priorityList.forEach((item, index) => {
                    if (val === item.code) {
                        this.userCalendar.priorityName = item.description;
                    }
                });
            },
            // 打开新增弹框
            openAddScheduleMod (type, item) {
                this.addScheduleMod.isShow = true;

                if (type === 'add') {
                    this.addScheduleMod.title = '新增日程';
                    this.userCalendar = {
                        title: '',
                        isCompleted: 0,
                        priorityCode: 'UCP00001',
                        priorityName: '重要紧急',
                        calendarTime: this.year + '-' + this.month + '-' + this.day,
                        frameText: '全天',
                        frameType: 1,
                        startTimeFrame: '',
                        endTimeFrame: '',
                        remark: ''
                    };
                }
                if (type === 'edit') {
                    console.log(item, '当前item');
                    this.addScheduleMod.title = '编辑日程';
                    this.userCalendarCurrentId = item.id;
                    this.userCalendar = {
                        title: item.title,
                        isCompleted: item.isCompleted ? 1 : 0,
                        priorityCode: item.priorityCode,
                        priorityName: item.priorityName,
                        calendarTime: item.date,
                        frameText: item.frameType === 1 ? '全天' : item.startTimeFrame + ' - ' + item.endTimeFrame,
                        frameType: item.frameType,
                        startTimeFrame: item.startTimeFrame,
                        endTimeFrame: item.endTimeFrame,
                        remark: item.remark,
                        id: item.id
                    };
                    if (!item.endTimeFrame) {
                        this.changeStartTimeFrame(item.startTimeFrame);
                    }
                }
            },
            // 验证
            validateTitle (rule, value, callback) {
                if (value) {
                    var valReg = /^[\u4e00-\u9fa5:',!();\-\-，。；：=+*&^%$#~‘’（）@！？<>《》a-zA-Z0-9_{}]*$/;
                    if (!valReg.test(value)) {
                        callback(new Error('允许输入中英文字符'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            },
            // 新增表单提交
            userCalendarOk (name) {
                // console.log(this.userCalendar, 123);
                this.addScheduleMod.btnLoading = true;
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let datas = {};
                        datas = JSON.parse(JSON.stringify(this.userCalendar));
                        datas.isCompleted === 0 ? datas.isCompleted = false : datas.isCompleted = true;
                        delete datas.frameText;
                        if (datas.startTimeFrame || datas.endTimeFrame) {
                            datas.frameType = 2;
                        } else if (!datas.startTimeFrame && !datas.endTimeFrame) {
                            datas.frameType = 1;
                        }

                        depot.post({
                            url: this.URL.USER.SAVE_USER_CALENDAR,
                            data: datas,
                            cb: data => {
                                this.addScheduleMod.btnLoading = false;
                                if (data.code === 0) {
                                    this.$Message.success('提交成功');
                                    this.addScheduleMod.isShow = false;
                                    this.TimeBoxType = false;
                                    this.$refs[name].resetFields();
    
                                    if (this.mode === 'month') {
                                        if (!this.typeIsNotDay) {
                                            // console.log('日');
                                        } else {
                                            // console.log('月');
                                        }
                                    }
                                    if (this.mode === 'week') {
                                        if (!this.typeIsNotDay) {
                                            // console.log('日');
                                        } else {
                                            // console.log('周');
                                        }
                                    }
                                    this.findUserCalendarList(this.searchQuery);
                                } else {
                                    this.$Message.error(data.message);
                                }
                            },
                            ce: error => {
                                this.addScheduleMod.btnLoading = false;
                                this.$Message.error('表单提交失败');
                            }
                        });
                    } else {
                        this.addScheduleMod.btnLoading = false;
                        this.$Message.error('请按规则填写');
                    }
                });
            },
            // 新增表单取消关闭
            userCalendarCancel (name) {
                this.addScheduleMod.isShow = false;
                this.TimeBoxType = false;
                this.$refs[name].resetFields();
            },
            // 选择开始时间
            changeStartTimeFrame (val) {
                // console.log(val, 1);
                let num = +val.split(':')[1];
                let num2 = +val.split(':')[0];
                if ((num + 15) < 60) {
                    num = num + 15;
                } else if ((num + 15) === 60) {
                    num = 0;
                    if (num2 < 23) {
                        num2 = num2 + 1;
                    } else if (num2 === 23) {
                        num2 = 0;
                    }
                } else if ((num + 15) > 60) {
                    num = (num + 15) - 60;
                    if (num2 < 23) {
                        num2 = num2 + 1;
                    } else if (num2 === 23) {
                        num2 = 0;
                    }
                }
                let num3 = '';
                if (num2 < 10) {
                    num2 = '0' + num2;
                }
                if (num < 10) {
                    num = '0' + num;
                }
                num3 = num2 + ':' + num;
                // console.log(num2, num, 2);
                if (val) {
                    this.userCalendar.frameText = val + '-' + num3;
                    this.userCalendar.endTimeFrame = num3;
                    // if (!this.userCalendar.endTimeFrame) {
                    //     this.userCalendar.frameText = val + '-' + num3;
                    //     this.userCalendar.endTimeFrame = num3;
                    // } else {
                    //     this.userCalendar.frameText = val + '-' + this.userCalendar.endTimeFrame;
                    // }
                }
            },
            // 选择结束时间
            changeEndTimeFrame (val) {
                // console.log(val, this.userCalendar.startTimeFrame, 3);
                if (val) {
                    let num = this.userCalendar.startTimeFrame.split(':')[0];
                    let num2 = val.split(':')[0];
                    let num3 = this.userCalendar.startTimeFrame.split(':')[1];
                    let num4 = val.split(':')[1];
                    // console.log(num, num2, num3, num4, 4);
                    if (this.userCalendar.startTimeFrame) {
                        if (+num2 < +num) {
                            this.$Message.error('结束时间不能大于开始时间');
                            this.getAndCloseTimeBox();
                        } else if (+num2 === +num && +num4 < +num3) {
                            this.$Message.error('结束时间不能大于开始时间');
                            this.getAndCloseTimeBox();
                        } else {
                            this.userCalendar.frameText = this.userCalendar.startTimeFrame + '-' + val;
                        }
                    } else {
                        this.$Message.error('请先选择开始时间');
                        this.getAndCloseTimeBox();
                    }
                }
            }
        }
    };
</script>

<style scope lang="less">
    .scheduleManagement {
        .ui-calendar {
            background-color: transparent;
            &-header {
                &__left {

                }
                &__right {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    padding-right: 55px;
                    &-btn{
                        line-height: 30px;
                        background-color: rgba(0, 0, 0, .3);
                        color: rgba(255, 255, 255, .5);
                        cursor: pointer;
                        margin-left: 5px;
                        padding: 0 15px;
                    }
                    &-btn.active{
                        background-color: rgba(0, 0, 0, .6);
                        color: rgba(255, 255, 255, 1);
                    }
                    
                }
            }

            &-modeBtn {
                padding: 0 5px;
                display: inline-block;
                color: #fff;
                font-size: 14px;
                line-height: 30px;
                text-align: center;
                cursor: pointer;
                background-color: rgba(255, 255, 255, .3);

                &:first-child {
                    background-color: rgba(255, 255, 255, .5);
                }
            }

            &-item {
                padding: 8px;
                color: #fff;
                height: 100%;
                background-color: rgba(0, 0, 0, .3);
                overflow-y: auto;
                &-date{
                    text-align: right;
                }
                &.is {
                    &-otherMonth {
                        color: #808080;
                        background-color: rgba(0, 0, 0, .5);
                    }

                    &-today {
                        
                    }
                }

                &-name {
                    font-size: 12px;
                    background-color: rgba(255, 255, 255, .3);
                    border-radius: 13px;
                    margin-bottom: 4px;
                    cursor: pointer;
                    &-span{
                        width: 26px;
                        height: 26px;
                        line-height: 26px;
                        text-align: center;
                        border-radius: 50%;
                        margin-right: 5px;
                        &.sty1{
                            background-color: #F22828;
                        }
                        &.sty2{
                            background-color: #F27D28;
                        }
                        &.sty3{
                            background-color: #28CAF2;
                        }
                        &.sty4{
                            background-color: #28F261;
                        }
                    }
                    &-text{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    flex: 1;
                        &.line-through{
                            text-decoration: line-through;
                            color: #000;
                        }
                    }
                    &-del {
                        cursor: pointer;
                    }
                }
            }
            
            .vue-calendar-header{
                padding: 0 0 10px 0;
            }
            .vue-calendar-week-title {
                padding: 0 32px;
                background-color: rgba(0, 0, 0, .6);
                border: none;
                box-shadow: 0 3px 2px rgba(0, 0, 0, .54);
            }
            .vue-calendar-week-title-item {
                height: 60px;
                line-height: 60px;
                padding:0;
                text-align: center;
                color: #fff;
                font-size: 14px;
            }
            .vue-calendar-body{
                margin: 10px 32px 0 32px;
                border-color: rgba(0, 0, 0, .5);
                border-style: solid;
                border-width: 1px 1px 0 0;
            }
            .vue-calendar-body-row {
                height: auto;
            }
            .vue-calendar-day-item {
                border-color: rgba(0, 0, 0, .5);
                border-style: solid;
                border-width: 0 0 1px 1px;
                height: 80px;
            }
            @media screen and (min-width: 1367px)  {
                .vue-calendar-day-item {
                    height: 110px;
                }
            }
            .ivu-tooltip{
                width: 100%;
            }
            .ivu-tooltip-rel{
                display: flex;
                align-items: center;
                height: 26px;
            }
            .ivu-tooltip-arrow{
                &:after{
                    border-bottom-color: rgba(255, 255, 255, .8)!important;
                }
            }
            .ivu-tooltip-light .ivu-tooltip-inner{
                background-color: rgba(255, 255, 255, .8);
            }
            .tooltip-box{
                .box1{
                    display: flex;
                    align-items: center;
                    height: 40px;
                    font-size: 14px;
                    color: #010101;
                    background-color: rgba(255, 255, 255, 1);
                    border-radius: 20px;
                    padding-right: 10px;
                    span{
                        width: 40px;
                        height: 40px;
                        line-height: 40px;
                        color:#fff;
                        text-align: center;
                        border-radius: 50%;
                        margin-right: 10px;
                        &.sty1{
                            background-color: #F22828;
                        }
                        &.sty2{
                            background-color: #F27D28;
                        }
                        &.sty3{
                            background-color: #28CAF2;
                        }
                        &.sty4{
                            background-color: #28F261;
                        }
                    }
                    .text{
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        flex: 1;
                    }
                }
                .box2{
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #010101;
                }
                .box3{
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #010101;
                }
            }
        }
        .ui-calendar.is-week{
            .vue-calendar-day-item{
                height: auto;
            }
            .ui-calendar-item{
                overflow-y: initial;
                min-height: 749px;
            }
        }
        .ui-calendar.is-day{
            .is-day-title{
                height: 40px;
                display: flex;
                align-items: center;
                color:#fff;
                font-size: 16px;
                font-weight: bold;
                & > span{
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    color:#fff;
                    font-size: 12px;
                    font-weight: bold;
                    border-radius: 50%;
                    margin: 0 10px;
                    &.type1{
                        background-color: #f22828;
                    }
                    &.type2{
                        background-color: #F27D28;
                    }
                    &.type3{
                        background-color: #28CAF2;
                    }
                    &.type4{
                        background-color: #28F261;
                    }
                }
            }
            .is-day-con{
                min-height: 350px;
                .is-day-con-item {
                    display: block;
                    display: flex;
                    align-items: center;
                    padding-left: 10px;
                    height: 40px;
                    border-top: 1px solid rgba(255, 255, 255, .1);
                    &:first-child{
                        border-top: 0;
                    }
                }
                .ivu-checkbox-inner {
                    border: 1px solid #fff;
                    background-color: rgba(255, 255, 255, .3);
                    vertical-align: middle;
                }
                .ivu-checkbox-checked .ivu-checkbox-inner {
                    border-color: #fff;
                    background-color: rgba(255, 255, 255, .3);
                }
                .is-day-con-sty1{
                    color: #fff;
                    font-size: 12px;
                    font-weight: bold;
                    margin-left: 4px;
                }
                .is-day-con-sty2{
                    position: relative;
                    padding-left: 53px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #fff;
                    font-size: 12px;
                    font-weight: bold;
                    cursor: pointer;
                    flex: 1;
                    &.type1,
                    &.type2,
                    &.type3,
                    &.type4{
                        &:before{
                            content: "";
                            position: absolute;
                            left: 40px;
                            top: 50%;
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background-color: #F22828;
                            transform: translate(0, -50%);
                        }
                    }
                    &.type2{
                        &:before{
                            background-color: #F27D28;
                        }
                    }
                    &.type3{
                        &:before{
                            background-color: #28CAF2;
                        }
                    }
                    &.type4{
                        &:before{
                            background-color: #28F261;
                        }
                    }
                    &.line-through{
                        color:#808080;
                        text-decoration: line-through;
                        &:before{
                            display: none;
                        }
                    }
                }
            }
            .viewTypeIsTime{
                .viewTypeIsTime-top{
                    &-left{
                        width: 100px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color:#fff;
                        font-size: 18px;
                    }
                    &-right{
                        flex: 1;
                        .is-day-con-item {
                            display: block;
                            display: flex;
                            align-items: center;
                            padding-left: 10px;
                            height: 40px;
                            border-top: 1px solid rgba(255, 255, 255, .1);
                            &:first-child{
                                border-top: 0;
                            }
                        }
                        .ivu-checkbox-inner {
                            border: 1px solid #fff;
                            background-color: rgba(255, 255, 255, .3);
                            vertical-align: middle;
                        }
                        .ivu-checkbox-checked .ivu-checkbox-inner {
                            border-color: #fff;
                            background-color: rgba(255, 255, 255, .3);
                        }
                        .is-day-con-sty1{
                            color: #fff;
                            font-size: 12px;
                            font-weight: bold;
                            margin-left: 4px;
                        }
                        .is-day-con-sty2{
                            position: relative;
                            padding-left: 53px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            color: #fff;
                            font-size: 12px;
                            font-weight: bold;
                            cursor: pointer;
                            &.type1,
                            &.type2,
                            &.type3,
                            &.type4{
                                &:before{
                                    content: "";
                                    position: absolute;
                                    left: 40px;
                                    top: 50%;
                                    width: 6px;
                                    height: 6px;
                                    border-radius: 50%;
                                    background-color: #F22828;
                                    transform: translate(0, -50%);
                                }
                            }
                            &.type2{
                                &:before{
                                    background-color: #F27D28;
                                }
                            }
                            &.type3{
                                &:before{
                                    background-color: #28CAF2;
                                }
                            }
                            &.type4{
                                &:before{
                                    background-color: #28F261;
                                }
                            }
                            &.line-through{
                                color:#808080;
                                text-decoration: line-through;
                                &:before{
                                    display: none;
                                }
                            }
                        }
                    }
                }
                .viewTypeIsTime-line{
                    padding-left: 90px;
                }
                .ivu-timeline{
                    .ivu-timeline-item-tail{
                        border-left: 1px solid #fff;
                        left: 9px;
                    }
                    .ivu-timeline-item-head {
                        width: 20px;
                        height: 20px;
                        background-color: #fff;
                        border-radius: 50%;
                        border: 1px solid #fff;
                        position: absolute;
                    }
                    .ivu-timeline-item-head-blue {
                        border-color: #fff;
                        color: #fff;
                    }
                    .ivu-timeline-item-content {
                        padding: 1px 1px 0 30px;
                        .time{
                            color:#fff;
                            font-size: 18px;
                            position: absolute;
                            left: -65px;
                            top: 0;
                        }
                        .content{
                            &-item{
                                width: 800px;
                                border-radius: 13px;
                                background-color: rgba(0, 0, 0, .3);
                                padding: 15px 20px;
                                margin-bottom: 10px;
                                display: flex;
                            }
                            .ivu-checkbox-wrapper{
                                display: flex;
                            }
                            .ivu-checkbox-inner {
                                border: 1px solid #fff;
                                background-color: rgba(255, 255, 255, .3);
                                vertical-align: middle;
                                margin-top: 5px;
                            }
                            .ivu-checkbox-checked .ivu-checkbox-inner {
                                border-color: #fff;
                                background-color: rgba(255, 255, 255, .3);
                            }
                            .viewTypeIsTime-line-sty1{
                                font-size: 12px;
                                color:#fff;
                                font-weight: bold;
                                margin: 3px 0 0 4px;
                            }
                            .viewTypeIsTime-line-sty2{
                                min-width: 26px;
                                height: 26px;
                                text-align: center;
                                line-height: 26px;
                                color: #fff;
                                font-size: 12px;
                                font-weight: bold;
                                border-radius: 50%;
                                margin: 0 5px 0 20px;
                                &.type1{
                                    background-color: #F22828;
                                }
                                &.type2{
                                    background-color: #F27D28;
                                }
                                &.type3{
                                    background-color: #28CAF2;
                                }
                                &.type4{
                                    background-color: #28F261;
                                }
                            }
                            .viewTypeIsTime-line-sty3{
                                cursor: pointer;
                                flex: 1;
                                color: #fff;
                                .viewTypeIsTime-line-sty3-text1{
                                    font-size: 16px;
                                    margin-top: 2px;
                                    &.line-through{
                                        color:#808080;
                                        text-decoration: line-through;
                                    }
                                }
                                .viewTypeIsTime-line-sty3-text2{
                                    font-size: 14px;
                                    margin: 5px 0;
                                    &.line-through{
                                        color:#808080;
                                        text-decoration: line-through;
                                    }
                                }
                                .viewTypeIsTime-line-sty3-text3{
                                    font-size: 12px;
                                    &.line-through{
                                        color:#808080;
                                        text-decoration: line-through;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>
